<template>
  <div>
 
    <div class="container">

        <div class="item12">

            <div class="item1">
                <mymenu></mymenu>
            </div>

            <div class="item2">
                <p>注册</p>

                <van-field v-model="email" label="用户邮箱" placeholder="请输入用户邮箱" />
                <van-field v-model="password" type="password" label="用户密码" placeholder="请输入用户密码"/>
                <van-field v-if="is_show==true" v-model="imgcode" label="图片验证码" placeholder="请输入图片验证码"/>
                <van-image v-if="is_show==true"  class="img" :src="img_url" alt="图片失效" height="50" width="100" @click="image_code"/><br>
                <van-button  @click="create_img">生成验证码</van-button><br><br>

                <van-button type="primary" @click="submit">注册</van-button>
                

                <van-popup :show="show" >
                    
                    <van-field v-model="code" label="账号激活码" placeholder="请输入激活码"/>
                    <van-button type="primary" @click="activation">激活</van-button>
                    <van-button type="primary" @click="noactivation">暂不激活</van-button>
                </van-popup>
            </div>


        </div>

    </div>

  </div>
</template>

<script>
// 导入子组件
import mymenu from '../components/menu.vue'

export default {
    
 data() {
    return {
        // 设置表单数据
      email:'',
      password:'',
      imgcode:'',
      is_show:false,
      show:false,
      code:'',
      text:'已将激活码发往您的邮箱',
      img_url: this.baseURL + 'imagecode/',
      uuid:'',
    }



 

  },
  
  components:{
    mymenu
  },
  methods:{
    create_img:function(){
        if(this.email == ''){
            this.$toast.fail('邮箱不能为空');
            return false
        }
        if(this.is_show == false){     //第一次点 
            this.img_url = this.img_url + '?email=' + this.email;  // 获取图片验证码
        }else{                    // 之后再点
            this.image_code()
        }
        this.is_show = true  //展示表单和图片
    },
    //刷新图片验证码
    image_code:function(){
        // var num = Math.ceil(Math.random()*10)
        var num = Date.now()
        this.img_url = this.baseURL+'imagecode/?email='+this.email + '&v=' + num;
        
    },
 
    submit:function(){
        if(this.email == ''){
            this.$toast.fail('邮箱不能为空');
            return false
        }

        if(this.password == ''){
            this.$toast.fail('密码不能为空');
            return false
        }

        if(this.imgcode == ''){
            this.$toast.fail('请输入图片验证码');
            return false
        }
        // 发起请求
        this.myaxios(this.baseURL+'user/register','post',{email:this.email,password:this.password,imgcode:this.imgcode}).then(resp=>{
            console.log('注册的响应',resp)
            if(resp.errcode == 0){
                // this.$toast.success(resp.msg+this.text)
                alert(resp.msg+this.text)
                this.show=true
            }else{
                this.$toast.fail(resp.msg)
            }
        })

    },
    activation:function(){
        if(this.code == ''){
            this.$toast.fail('请输入激活码')
            return
        }
        this.myaxios(this.baseURL+'user/register','put',{email:this.email,code:this.code}).then(resp=>{
            console.log(resp)
            if(resp.errcode == 0){
               this.$toast.success(resp.msg)
               this.$router.go(0)
            }else{
                this.$toast.fail(resp.msg)
            }
        })
    },
    noactivation:function(){
        this.$router.go(0)
    }

  },
  mounted(){
    
  },
  created(){

    

  }

}
</script>


<style scoped>
@import url('../assets/style.css');


</style>

